<template>
  <view>
    <view class="tabbar-title">

      <v-tabs v-model="activeTab" bgColor="#F0F3F6" :fixed="true" :lineScale="0.2" :scroll="false" :tabs="tabs"
              activeFontSize="32rpx" fontSize="30rpx"></v-tabs>
    </view>
    <!-- 电梯信息-  相关联系人 -->
    <view class="" v-show="activeTab == 0">
      <ElevatorDetail :elevatorInfo="elevatorInfo" :elevatorId="elevatorInfo.elevatorId"></ElevatorDetail>


    </view>
    <!-- 故障列表 -->
    <view class="" v-show="activeTab == 1">
      <uni-card>
        <view class="main">
          <image :src="inspection.headManAvatar" mode=""></image>
          <view class="">
            <view class="main-time">
              <text>负责人</text>
              <text>{{ inspection.headMan }}</text>
            </view>
            <view class="main-time">
              <text>启动时间</text>
              <text>{{ inspection.startTime }}</text>
            </view>
          </view>

        </view>
        <view class="">
          <view class="main-time mt20">
            <text>年检日期</text>
            <text>{{ inspection.annualDate }}</text>
          </view>
          <view class="main-time mt20" v-if="types == 2">
            <text>完成时间</text>
            <text>{{ inspection.completionTime }}</text>
          </view>
        </view>
      </uni-card>

      <uni-card>
        <view class="choose">
          <view class="choose-left">是否年检完成</view>
          <switch @change="switchChange($event,'checkThrough')" :checked="parmes.checkThrough =='Y'"
                  :disabled="types == 2"/>
          <!-- <view class="textTip" v-else>{{parmes.checkThrough == 1 ? '否' : '是'}}</view> -->
        </view>
        <view class="choose">
          <view class="choose-left">是否检查限速器</view>
          <switch @change="switchChange($event,'checkSpeedLimiter')" :checked="parmes.checkSpeedLimiter == 'Y'"
                  :disabled="types == 2"/>
          <!-- <view class="textTip" v-else>{{parmes.checkSpeedLimiter == 1 ? '否' : '是'}}</view> -->
        </view>
      </uni-card>

      <uni-card>
        <textarea v-model="parmes.inspectionContext" placeholder="年检描述：" class="describe" maxlength="100"
                  :disabled="types == 2"/>
      </uni-card>
      <view class="tipText">
        <!-- 已输入<text>{{parmes.inspectionContext.length}}</text>/100 -->
      </view>
      <view class="addImage">
        <view class="Elevatorimage" v-if="!parmes.inspectionImg" @click="addElevator">+</view>
        <image class="Elevatorimage" :src="parmes.inspectionImg" mode="" @click="addElevator" v-else></image>
        <image src="@/static/image/polling/DelectIcon.png" mode="" @click.stop="parmes.inspectionImg = ''"
               class="DelectIcon" v-if="parmes.inspectionImg && types == 1"></image>
        <view class="tips" v-if="types == 1">（上传一张年检图片）</view>
      </view>

      <view class="submits" @click="confir" v-if="types == 1">确定完成</view>
    </view>


  </view>
</template>

<script>
import ElevatorDetail from '@/components/ElevatorDetail.vue'
import {confirmAnnualInspection, getAnnualInspection} from "@/api/iot/annualInspection";
import {ossUpload} from "@/api/system/oss";

export default {
  components: {
    ElevatorDetail
  },
  data() {
    return {
      activeTab: 0,
      tabs: ['电梯信息', '年检详情'],
      contactInformation: [], // 相关联系人
      types: "",
      inspectionId: "", //电梯ID
      elevatorInfo: {},//电梯信息
      inspection: "",//年捡详情
      parmes: {
        checkSpeedLimiter: '',//是否检查限速器（0.是，1.否）   
        checkThrough: '',//   是否年检通过（0.是，1.否）  
        inspectionContext: "",//年检描述
        inspectionImg: "",//  年检图片
      },
    }
  },
  onLoad(e) {
    this.inspectionId = e.inspectionId
    this.types = e.types
    this.getElevatorDetail()

  },
  methods: {
    // 详情
    async getElevatorDetail() {
      // let 
      const res = await getAnnualInspection(this.inspectionId);
      console.log("res", res);
      this.elevatorInfo = res.elevatorVo
      this.inspection = res
      Object.keys(this.parmes).forEach(item => {
        this.parmes[item] = res[item]
      })
      console.log("this.parmes", this.parmes);
    },
    // 滑块 
    switchChange({detail}, key) {
      this.$set(this.parmes, key, detail.value ? 'Y' : 'N')
    },
    // 上传图片
    async addElevator() {
      if (this.types == 1) {
        uni.chooseImage({
          count: 1,
          success: async (res) => {
            const tempFilePaths = res.tempFilePaths;
            const ress = await ossUpload(tempFilePaths[0]);
            this.$set(this.parmes, "inspectionImg", ress.url)
          }
        });
      } else {
        console.log(this.parmes.inspectionImg)
        uni.previewImage({
          current: 1,
          urls: [this.parmes.inspectionImg]
        })
      }
    },
    // 提交
    async confir() {
      if (!this.parmes.inspectionContext) {
        this.tip("请输入故障描述")
        return
      } else if (!this.parmes.inspectionImg) {
        this.tip("请上传图片年检图片")
        return
      }
      const res = await confirmAnnualInspection({inspectionId: this.inspectionId, ...this.parmes})
      var pages = getCurrentPages();
      var prevPage = pages[pages.length - 2];
      //#ifdef APP-PLUS
      prevPage.$vm.getByStatus(this.types, true)
      // #endif
      //#ifdef H5
      prevPage.getByStatus(this.types, true)
      // #endif
      uni.navigateBack({})
    },
    // 
    async getFaultList() {

    },
  },

}
</script>

<style scoped lang="scss">

.v-tabs__container {
  height: 200rpx !important;
  line-height: 100rpx !important;
}

.uni-card {
  width: 670rpx;
  /* height: 820rpx; */
  background: #FFFFFF;
  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
  border-radius: 16rpx;
  margin: 0 auto;
  border: none;
  margin-bottom: 30rpx;
}

.v-tabs {
  height: 154rpx;
  background-color: #F0F3F6;
}

.describe {
  width: 100%;
  height: 226rpx;
  font-size: 24rpx;
}

.tipText {
  padding: 5px 43rpx;
  color: #989BA6;
  text-align: right;
  font-size: 24rpx;

  text {
    font-size: 30rpx;
    font-weight: bold;
  }
}


/* 内容区域 */
.main {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1rpx solid #E2E6EF;
  padding-bottom: 15rpx;
}

.main image {
  width: 80rpx;
  height: 80rpx;
  background: #E2E6EF;
  border: 4rpx solid #F0F3F6;
  border-radius: 50%;
  margin-right: 18rpx;

}

.main-time {
  font-size: 24rpx;
  color: #34363D;
}

.main-time text:nth-child(1) {
  color: #989BA6;
  width: 110rpx;
  display: inline-block;
}

.main-time text:nth-child(2) {
  margin-left: 20rpx;
}

.mt20 {
  margin-top: 20rpx;
}

.choose {
  height: 100rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  /* text-align: center; */
  border-bottom: 1px solid #E2E6EF;

  switch {
    transform: scale(0.8);
  }

  .textTip {
    color: #017EFE;
  }
}

.choose-left {
  font-size: 30rpx;
  font-weight: bold;
  text-align: left;
  color: #34363D;

}

.choose:last-child {
  border: none;
}

.addImage {
  display: flex;
  align-items: flex-end;
  position: relative;
  width: 670rpx;
  margin: 0 auto;

  .Elevatorimage {
    width: 200rpx;
    height: 200rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    font-size: 100rpx;
    text-align: center;
    line-height: 200rpx;
    color: #017EFE;
  }

  .DelectIcon {
    position: absolute;
    width: 48rpx;
    height: 48rpx;
    left: 175rpx;
    top: -25rpx;
  }

  .tips {
    font-size: 30rpx;
    color: #989BA6;
  }
}

.submits {
  width: 670rpx;
  height: 104rpx;
  background: #017EFE;
  box-shadow: 0px 10rpx 15rpx 0px rgba(1, 126, 254, 0.2);
  border-radius: 52rpx;
  line-height: 104rpx;
  text-align: center;
  margin: 70rpx auto 0;
  font-size: 36rpx;
  color: #FFFFFF;
}
</style>
